<script setup lang='ts'>
import { useGetMemberInfo } from '@fl/api/member-api/member'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import Introduce from './components/introduce.vue'

const itdRef = ref()

const { push } = useRouter()

const circleUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

const { data, isLoading } = useGetMemberInfo()

function doRenew() {
    itdRef.value.cacheTab()
    push('/member-add?orderType=2')
}
</script>

<template>
    <ElCard class="mb-20">
        <div class="flex items-center">
            <el-avatar v-loading.fullscreen.lock="isLoading"
                       :size="100"
                       :src="data?.accountImage || circleUrl"
            />

            <div class="ml-20">
                <p class="mb-5 text-24 c-#000 font-600">
                    {{ data?.companyName }}
                </p>

                <p class="text-14 c-#000">
                    {{ data?.memberLevel }}
                </p>

                <!-- 会员状态 0 正常 1 已过期 2 已禁用 -->
                <p v-if="data?.memberExpirationTime"
                   class="text-14 c-#000"
                >
                    有效期至：{{ data?.memberExpirationTime }}号到期
                    <ElButton v-if="data?.memberStatus !== 2 && data?.configMemberLevelFlag !== 0"
                              class="ml-20"
                              size="small"
                              @click="doRenew"
                    >
                        续费
                    </ElButton>
                </p>

                <p v-if="data?.memberStatus !== undefined"
                   class="mt-5 text-14 c-#000"
                >
                    <el-tag v-if="data?.memberStatus === 0"
                            type="success"
                    >
                        正常
                    </el-tag>

                    <el-tag v-if="data?.memberStatus === 1"
                            type="danger"
                    >
                        已过期
                    </el-tag>

                    <el-tag v-if="data?.memberStatus === 2"
                            type="info"
                    >
                        已禁用
                    </el-tag>
                </p>
            </div>
        </div>
    </ElCard>

    <Introduce ref="itdRef"
               :info="data"
    />
</template>
